<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">

<head th:replace="head :: commonHead('我的优惠券')">

</head>

<body>

<div th:replace="head :: header"></div>

<!-- 主体内容 -->
<div id="app" class="user_container clearfix">

    <!-- 左侧导航 -->
    <div th:replace="content/personal/left :: body"></div>

    <!-- 右侧内容 -->
    <div class="right_boxwrap">
        <div class="user_right_box">
            <div class="user_right_box_title">
                <div class="user_right_box_title_l">
                    <em></em>
                    <h3>我的优惠券</h3>
                </div>
            </div>

            <el-dialog
                    title="" :visible.sync="centerDialogVisible"
                    width="30%" center>
                <span>请输入接收人手机号码</span>
                <input id="target" value=""/>
                <span slot="footer" class="dialog-footer">
                     <el-button @click="centerDialogVisible = false">取消</el-button>
                     <el-button type="primary" @click="present">确定</el-button>
                </span>
            </el-dialog>

            <div class="coupon_content">
                <ul class="clearfix">
                    <li th:each="item:${discountCoupons}" th:switch="${item.price}" th:attr="data-id=${item.id}">
                        <img th:case="10" th:src="${#request.getAttribute('ctx') + '/static/front/img/Coupon-1.png'}">
                        <img th:case="20" th:src="${#request.getAttribute('ctx') + '/static/front/img/Coupon-2.png'}">
                        <img th:case="30" th:src="${#request.getAttribute('ctx') + '/static/front/img/Coupon-3.png'}">
                        <img th:case="50" th:src="${#request.getAttribute('ctx') + '/static/front/img/Coupon-4.png'}">
                        <img th:case="100" th:src="${#request.getAttribute('ctx') + '/static/front/img/Coupon-5.png'}">
                        <img th:case="200" th:src="${#request.getAttribute('ctx') + '/static/front/img/Coupon-6.png'}">

                        <a href="javascript:void(0)" th:attr="data-id=${item.id}"  @click="open">赠送</a>
                        <a th:href="@{/private}" style="top:80px;">使用</a>
                    </li>
                    <div style="padding: 20px; text-align: center;" th:if="${discountCoupons eq null || discountCoupons.size() eq 0}">
                        暂时没有可用的优惠券！
                    </div>
                </ul>
            </div>

        </div>
    </div>
</div>

<div th:replace="foot :: body"></div>

</body>

<script th:src="${#request.getAttribute('ctx') + '/static/front/js/home.js'}" type="text/javascript" charset="utf-8"></script>

<script>
    new Vue({
        el: '#app',
        data: {
            centerDialogVisible: false,
            id: ''
        },
        methods: {
            // dialog
            open: function(ele) {
                this.centerDialogVisible = true;
                this.id = ele.target.getAttribute('data-id');
            },

            // 转赠
            present: function () {
                var _self = this;
                var target = $('#target').val();
                $.ajax({
                    type: 'post',
                    url: '/personal/discountcoupon/api/present',
                    data: {
                        id: _self.id,
                        target: target,
                    },
                    beforeSend: function (xhr) {
                        xhr.setRequestHeader($("meta[name='_csrf_header']").attr("content"), $("meta[name='_csrf']").attr("content"));
                    },
                    dataType: 'json',
                    success: function (result) {
                        if (result.data == true) {
                            $('li[data-id="' + _self.id + '"]').remove();
                            ELEMENT.Message.success(Messages.PRESENT_SUCCESS);
                            _self.centerDialogVisible = false;
                        } else {
                            ELEMENT.Message.error(Messages.PRESENT_FAILED);
                        }
                    },
                    error: function (e) {
                        ELEMENT.Message.error(Messages.ERROR);
                    }
                })
            }
        }
    })

</script>

</html>
